<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgb(0, 0, 0);
		}
		.tu {
			width: 500px;
			height: 300px;
			background-image: url(4.jpg);
			background-size: 100% auto;
			background-repeat: no-repeat;
			position: relative;
			overflow: hidden;
			cursor: pointer;
		}
		/*用伪类元素做扫描线*/
		.tu::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 500px;
			height: 20px;
			background-image: url(4.jpg);
			background-size: 100% auto;
			background-repeat: no-repeat;
			filter: invert(100%);
			opacity: 0;
			/*
			filter: sepia(100%); 图片发黄。
			filter: invert(100%); 像X光底片。
			*/
		}
		/*实现扫描*/
		.tu:hover::after {
			opacity: 1;
			animation: move 1.8s linear infinite;
		}
		@keyframes move {
			0% {
				top: 0;
				background-position: 6px 0px;
			}
			20% {
				top: 60px;
				background-position: -6px -60px;
			}
			40% {
				top: 120px;
				background-position: 6px -120px;
			}
			60% {
				top: 180px;
				background-position: -6px -180px;
			}
			80% {
				top: 240px;
				background-position: 6px -240px;
			}
			100% {
				top: 300px;
				background-position: -6px -300px;
			}
		/*background-position的y轴位移刚好等于top的距离，然后x轴为0的话就不抖，有数值就会抖动*/
		}
	</style>
</head>
<body>
	<div class="tu"></div>
</body>
</html>
